import React, { forwardRef } from 'react';
import './index.scss';

export interface GradientPanelProps {
  /**
   * 自定义类名
   */
  className?: string;
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  /**
   * 子组件
   */
  children?: React.ReactNode;
  /**
   * 宽度
   */
  width?: number | string;
  /**
   * 高度
   */
  height?: number | string;
  /**
   * 不透明度
   */
  opacity?: number;
  /**
   * 背景颜色
   */
  backgroundColor?: string;
  /**
   * 是否启用响应式
   */
  responsive?: boolean;
  /**
   * 设计模式
   */
  __designMode?: string;
  /**
   * 组件ID
   */
  componentId?: string;
  /**
   * 组件名称
   */
  _componentName?: string;
  /**
   * 其他属性
   */
  [key: string]: any;
}

const GradientPanel = forwardRef<HTMLDivElement, GradientPanelProps>(({
  className = '',
  style = {},
  children,
  width = 500,
  height = 593,
  opacity = 1,
  backgroundColor = 'rgba(0, 0, 0, 0.5)',
  responsive = true,
  __designMode,
  componentId,
  _componentName,
  ...otherProps
}, ref) => {

  const customStyle: React.CSSProperties = {
    backgroundColor,
    opacity,
    ...style,
  };

  if (width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }

  if (height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  // 确保backgroundColor能够生效
  if (backgroundColor) {
    customStyle.background = backgroundColor;
  }

  const combinedClassName = [
    'hzdz-gradient-panel',
    responsive ? 'responsive' : '',
    className
  ].filter(Boolean).join(' ');

  return React.createElement('div', {
    ref,
    className: combinedClassName,
    style: customStyle,
    'data-component-id': componentId,
    'data-component-name': _componentName,
    ...otherProps
  }, children);
});

GradientPanel.displayName = 'GradientPanel';

export default GradientPanel;